<template>
  <van-nav-bar title="评估工具" left-arrow @click-left="onBack" />
  <div class="assessment-page">
    <div class="assessment-title">请选择您需要进行评估的项目，点击并进入下一步</div>
    <div class="assessment-divider"></div>
    <div class="assessment-grid">
      <div class="assessment-item" v-for="item in assessmentList" :key="item.label" @click="item.onClick">
        <span :class="'iconfont ' + item.icon"></span>
        <div class="assessment-label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const onBack = () => {
  router.back()
}
const goQuestionnaire = () => {
  router.push('/assessment/questionnaire')
}
const goPadTest = () => {
  // 跳转尿垫试验
}
const goUltrasound = () => {
  // 跳转超声测量
}
const assessmentList = [
//   { icon: 'icon-niaodian', label: '尿垫试验', onClick: goPadTest },
//   { icon: 'icon-chaosheng', label: '超声测量', onClick: goUltrasound },
  { icon: ' icon-dingdandingdanmingxishouzhimingxi', label: '专科问卷', onClick: goQuestionnaire },
]
</script>

<style scoped lang="scss">
.assessment-page {
  background: #fff;
  min-height: 100vh;
  padding: 32px 0 0 0;
  /* van-nav-bar 默认高度 46px，内容区需加 padding-top 防止被遮挡 */
  padding-top: 46px;
}
.assessment-title {
  font-size: 30px;
  color: #222;
  font-weight: 600;
  margin-bottom: 32px;
  text-align: left;
  padding: 0 32px;
}
.assessment-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0 32px 24px 32px;
  border: none;
}
.assessment-grid {
  display: flex;
  justify-content: flex-start;
  gap: 64px;
  padding: 0 32px;
  border-radius: 12px;
  margin-top: 24px;
}
.assessment-item {
  background: #eaf8fd;
  border-radius: 16px;
  width: 260px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  border: none;
  box-shadow: none;
  &:hover {
    box-shadow: 0 8px 32px rgba(64, 158, 255, 0.18);
    transform: translateY(-2px) scale(1.04);
  }
}
.assessment-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}
.assessment-label {
  font-size: 32px;
  color: #6b7a8f;
  font-weight: 500;
  letter-spacing: 1px;
}
.assessment-item .iconfont {
  font-size: 88px;
  display: block;
  color: #6b7a8f;
}
</style> 